<!--
 * @Description: 
 * @Author:赵华宇
 * @Date: 2024-11-12 09:26:38
 * @LastEditors: 赵华宇
 * @LastEditTime: 2024-11-13 17:07:52
-->
<!-- 页面主体结构 -->
<template>
  <h1>hello,vue</h1>
  <h1>模版语法</h1>
  <h2>文本插值 - 最基本的数据绑定形式 - 双大括号语法</h2>
  a:{{ a }}
  <h2>展示原始Html-扫码支付</h2>
  <div v-html="b"></div>
  <h2>html属性绑定</h2>
  <div id="app2">id为app2</div>
  <!-- <div v-bind:id="id3">id为app3</div> -->
  <div :id="id3">id为app3</div>
  <h2>直接使用js表达式</h2>
  {{1+1}}
  <br>
  {{ a+1 }}
  <br>
  {{1==1?"yes":"no"}}
  <h1>响应式数据</h1>
  <h2>声明响应式数据</h2>
  响应式数据在页面模板上的使用
  count:{{count}}
  <br>
  响应式数据在js代码中使用
  count.value
  <!-- 一个使count自增的按钮 -->
   <button @click="count++">count++</button>
   <button @click="countAdd">countAdd++</button>
   a:{{ a }}
   <button @click="a++">a++</button>
   <h1>类与样式的绑定</h1>
   <h2>
    class绑定
   </h2>
   <div class="myDiv myDiv2":class="{active:isActive,'text_success':noError,}" >class-对象方式绑定</div>
   <div :class="[isActive ? 'active':'noActive','arrclass']">class数组方式绑定</div>
   <button @click="changActive">切换active</button>
   <h2>style绑定</h2>
   <p>style与css属性名，使用小驼峰命名</p>
   <p>或者'font-size'</p>
   <div :style="{color:activeColor,'fontSize':fontSize+'px'}">style绑定</div>
   <button @click="changeActiveColor('blue')">蓝色</button>
   <button @click="changeActiveColor('green')">绿色</button>
   <button @click="changeActiveColor('orange')">橙色</button>
   <h1>条件渲染</h1>
   <h2> v-if v-else</h2>
   <button @click="changeFlag">{{ flag }}</button>
   <div v-if="flag">白天 阳光</div>
   <div v-else>黑夜 月亮</div>
   <p>v-if不满足条件时 dom会删除
    v-show不满足条件时 dom会隐藏这个元素
    区别：
       v-if:事件监听器和他的子组件都会被销毁与重建 所以如果是频繁切换 开销比较高
             v-if是惰性的 如果初始条件是flase则不会创建这个元素
       v-show:css的display 无论初始条件是true还是false这个元素都会创建，条件变化时
              元素也不会被销毁。
       如果需要频繁切换就用v-show
   </p>

   <div v-show="flag">云朵</div>
   <h1>列表渲染</h1>
   <h2>v-for</h2>
   <div v-for="a in arr">
    <p>{{ a }}</p>
    </div>

    <div v-for="(o, index) in obj":key="o.id">
    <p>{{ index }}-姓名:{{ o.name }}-年龄：{{o.age}}</p>
    </div>
    <!-- 生成n个指定标签 -->
    <p v-for="n in 3">{{ n }}</p>
    <h1>事件处理</h1>
    <h2>v-on 简写 @ 用于监听DOM事件</h2>
    <p>count:{{ count }}</p>
    <button @click="countAdd">count++</button>
    <button @click="countAddNumber(3)">count+3</button>
    <!-- 捕获原生事件对象 -->
    <button @click="countAddEvent($event)">countEvent</button>
    <button v-on:click="countAdd">v-on:count++</button>
    <br><br>
    <!-- 键盘事件 -->
     <!-- 登录 -->
     <input @keyup.enter="login" type="text">
     <!-- 换行 -->
     <input @keyup.alt.enter="enter" type="text">
     <!-- <input @click.ctrl="" type="text"> 点击 -->
      <!-- .left .right .middle 鼠标按键 -->
       <h1>表单输入与绑定</h1>
       <h2>基本用法</h2>
       用户名：{{ username }}
       密码：{{ password }}
       管理员{{ checked }}
       性别：{{ gender }}
       爱好{{ likes }}
       <br>
       用户名<input v-model="username" type="text" placeholder="请输入用户名">
       密码<input v-model="password" type="text" placeholder="请输入密码" @keyup.enter="login">
       <br>
       管理员<input type="checkbox" v-model="checked">
       <br>
       男<input type="radio" value="男" v-model="gender">
       女<input type="radio" value="女" v-model="gender">
       <br>
       爱好
       <select v-model="likes" multiple>
        <!-- 单值属性 -->
         <!-- :disabled="true" -->
        <!-- disabled -->
         <option :disabled="true" value="">请选择你喜欢的爱好</option>
         <!-- <option value="篮球">篮球</option>
         <option value="足球">足球</option> -->
         <option v-for="i in items" :value="i.value">{{ i.name }}</option>
       </select>
       <button @click="login">登录</button>
       <!-- 自定义组件的使用 -->
        <!-- 控制子组件的字体大小 -->
         <button @click="addFontSize">字体变大</button>
         <button @click="subFontSize">字体变小</button>
        <CountAdd ref="childRef" num="5"/>
        <!-- 组件传参 -->
        <CountAdd num="10"/>
        <!-- 事件监听 -->

       <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
       <br><br><br><br><br><br><br><br><br><br>
</template>

<!-- 写js代码 -->
<script setup>
//声明响应式数据
import {ref,onMounted,onUpdated,onUnmounted}from 'vue'
const childRef=ref(null);
//导入自定义组件
import CountAdd from '@/components/CountAdd/CountAdd.vue'
//ref()函数 用于声明响应式状态
const username=ref("");
const password=ref("")
const checked=ref(true);
const gender=ref("男");
const likes=ref([]);
const items=ref([]);
//父组件调用子组件的方法
function addFontSize(){
  console.log("🚀 ~ addFontSize ~ 增加子组件的字体大小:",);
  if(childRef.value){
    console.log("🚀 ~ childRef:", childRef.value);
    childRef.value.childAddFont();
  }
}
function subFontSize(){
  console.log("🚀 ~ subFontSize ~ 减少子组件的字体大小:",);
  if(childRef.value){
    console.log("🚀 ~ childRef:", childRef.value);
    childRef.value.childSubFont();
  }
}

//方法的调用
getItems();
//模拟网络请求
function getItems(){
  var timeoutId=setTimeout(()=>{
    //发送网络请求 获取到了数据
    items.value=[
      {value:"篮球",name:"篮球"},
      {value:"足球",name:"足球"},
      {value:"网球",name:"网球"},
    ]
  },1000)
  console.log('🚀 CC - timeoutId - timeoutId:', timeoutId);
}
const arr = ["苹果","香蕉","梨子"];
const obj=[{id:1,name:"张三",age:12},{id:2,name:"李四",age:13},{id:3,name:"王五",age:14}];
const isActive = ref(true);
const noError = ref(true);
const activeColor = ref("hotpink");
const fontSize = "30";
const flag = ref(true);
//ref函数用来声明响应式状态
//声明一个初始值为0的响应式数据count
const count = ref(0)
//如果在js中使用需要.value使用
count.value++;
console.log("count.value"+count.value);
//countAdd方法的声明
function countAdd(){
  count.value++;
}
function countAddNumber(num){
  count.value+=num;
}
function countAddEvent(event){
  console.log('countAddEvent:',event);
}
function changActive(){
  isActive.value=!isActive.value;
}
function changeActiveColor(color){
  activeColor.value=color;
}
function changeFlag(){
  flag.value=!flag.value;
}
function login(){
  // alert("正在登录....");
  var str="";
  if(checked.value){
    str="管理员";
  }
  // switch(checked.value){
  //   case true:
  //     if(username.value=="admin" && password.value =="123"){

  //       alert("管理员登录成功");
  //     }else{
  //       alert("用户名或密码错误");
  //     }
  //     break;
  //   default:
  //     if(username.value=="admin" && password.value =="123"){
  //       alert("普通用户登录成功");
  //     }else{ 
  //       alert("用户名或密码错误");
  //     }
  // }
  if(username.value=="admin" && password.value =="123"){
    alert(str+"登录成功");
  }else{
    alert(str+"用户名或密码错误");
  }
}
function enter(){
  alert("换行");
}
// 声明一个变量a并且初始化
const a = 10;
var b = '<span style="color:red;">这个是一个文字为红色的span标签</span>';
var id3='app3';
onMounted(
  ()=>{
// alert('onMounted');
console.log("🚀 ~ onMounted:", onMounted)
  }
)
onUpdated(()=>{
  // alert('onUpdated');
  console.log("🚀 ~ onUpdated ~ onUpdated:", onUpdated)
})
onUnmounted(()=>{
  //组件被卸载 会触发
  //清除定时器 事件监听等内容
  clearTimeout(timeoutId);
  //clearInterval(intervalId);
})
</script>

<!-- 页面样式 -->
<style scoped>
.active{
  color:red;
  font-size: 26px;
}
.noActive{
  color:orange;
  /* font-size: 26px; */
}
</style>